import { useMemo } from 'react'
import styles from './index.module.less';
import ReactEcharts from 'echarts-for-react';
import { getRandomColor } from '../../utils/tool';

let colors = [
    "#1f77b4",
    "#ff7f0e",
    "#2ca02c",
    "#d62728",
    "#9467bd",
    "#8c564b",
    "#e377c2",
    "#7f7f7f",
    "#bcbd22",
    "#17becf",
    "#aec7e8",
    "#ffbb78",
    "#98df8a",
    "#ff9896",
    "#c5b0d5"
  ];
const Pie = ({ data ,grid}) => {
    // if (data && data.length) {
    //     data.map(() => {
    //         let cl = getRandomColor()
    //         colors.push(cl)
    //     })
    // }
    const getOptions = useMemo(() => {
        const options = {
            color: colors,
            series: [
                {
                    type: 'pie',
                    // radius: 180,
                    center: ['30%', '50%'],
                    avoidLabelOverlap: false,

                    zlevel: 0,
                    data: data,
                    showEmptyCircle: false,
                    itemStyle: {
                        opacity: 0.8
                    },
                    label: {
                        show: false,
                        color: '#1FDFE9',
                        position: 'center',
                    },
                    z: 10,
                },
            ],
            // grid: {
            //     left: '10%',
            //     right: '20%',
            //     bottom: '10%',
            //     top: '30%',
            //     containLabel: true,
            // },
            legend: { // 对图形的解释部分
                orient: 'vertical',
                right: 10,
                y: 'center',
                icon: 'circle',	
                itemHeight: 6,		// 添加
                type: 'scroll',  //图例类型，plain/scroll
                formatter: function (name) {	// 添加
                    let total = 0
                    let target
                    for (let i = 0; i < data.length; i++) {
                        total += data[i].value
                        if (data[i].name === name) {
                            target = data[i].value
                        }
                    }
                    var arr = [
                        '{a|' + name + '}',
                        // '{b|' + ((target / total) * 100).toFixed(2) + '%}',
                        '{c|' + target + '次}'
                    ]
                    return arr.join('  ')
                },
                textStyle: {
                    padding: [4, 0, 0, 0],
                    rich: {
                        a: {
                            fontSize: 12,
                            width: 80,
                            color:'rgba(0, 0, 0, 0.65)'
                        },
                        // b: {
                        //     fontSize: 12,
                        //     width: 0,
                        //     color: 'rgba(0,0,0,0)'
                        // },
                        c: {
                            fontSize: 12,
                            color:'rgba(0, 0, 0, 0.65)'
                        }
                    }
                }
            },
        }
        return options;
    }, [data]);
    return (
        <div className={styles.echartsPie} id='chartPie'>
        <ReactEcharts
            style={{
                width: '100%',
                height: '100%',
            }}
            option={getOptions}
            opts={{ devicePixelRatio: 2 }}
        />

        {
            data && data.length === 0 && <div className={styles.noData}>暂无数据</div>
        }
    </div>
    );
}

export default Pie